<template>
	<div id="app"  >
		<transition name="el-zoom-in-top"  slot="header">
			<div v-show="$route.meta.header !== 'hidden'" style="position: absolute; top: 0;left:0;right: 0; z-index:22;" :class="{redTheme: $route.meta.red}" id="vueHead">
				<van-nav-bar
					:title="$route.name"
					:left-text="$route.leftText"
					:left-arrow="!$route.meta.back"
					:border="!$route.meta.red"
					@click-left="onClickLeft"
					@click-right="onClickRight"/>
			</div>
		</transition>
		<div class="bodyContent"  :style="{
			paddingTop: $route.meta.header !== 'hidden' ? navBarHeight + 'px' : 0,
			paddingBottom: $route.meta.footer === 'show' ? tabBarHeight + 'px' : 0,
			height: '100%'
		}">
			<keep-alive :include="['index', 'mine']">
				<router-view></router-view>
			</keep-alive>
		</div>
		<div id="addFixedTab">
			<transition name="el-zoom-in-bottom" slot="bottom">
				<van-tabbar v-model="active"  active-color="#ff6700" inactive-color="#3d3d3d" v-show="$route.meta.footer === 'show'">
					<van-tabbar-item icon="service-o" to="/kefu">客服</van-tabbar-item>
					<van-tabbar-item icon="home-o" to="/index">首页</van-tabbar-item>
					<van-tabbar-item icon="apps-o" to="/classify">分类</van-tabbar-item>
					
					<!-- <van-tabbar-item icon="balance-o" to="/transaction">交易</van-tabbar-item>
					<van-tabbar-item icon="shopping-cart-o" to="/shopCar">购物车</van-tabbar-item> -->
					
					<van-tabbar-item icon="user-circle-o" to="/mine">我的</van-tabbar-item>
				</van-tabbar>
			</transition>
		</div>
	</div>
</template>

<script>
import './assets/font/iconfont.css';
import $ from 'jquery';

// import { ViewBox } from 'vux';

export default {
	name: 'App',
	data() {
		return {
			active: 1,
			navBarHeight: 46,
			tabBarHeight: 50,
			contentHeight: 0,
		}
	},

	methods: {
		initContentHeight() {

		},
		onClickLeft() {
			this.$router.back();
		},

		onClickRight() {

		},

		getHeight() {
			let wH = document.documentElement.clientHeight;
			let top = this.$route.meta.header !== 'hidden' ? this.navBarHeight : 0;
			let bottom = this.$route.meta.footer === 'show' ? this.tabBarHeight : 0;
			this.bodyHeight = wH - top - bottom;
			localStorage.setItem('bodyHeight', this.bodyHeight);
		},

		getActive() {
			// let path = ['/index', '/classify', '/transaction', '/shopCar', '/mine'];
			let path = ['/kefu', '/index', '/classify', '/mine'];
			this.active = path.indexOf(this.$route.path);
		},

		isPc() {
			var _this = this;
			console.log(navigator.userAgent.toLowerCase());
			var sUserAgent = navigator.userAgent.toLowerCase();
			var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
			var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
			var bIsMidp = sUserAgent.match(/midp/i) == "midp";
			var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
			var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
			var bIsAndroid = sUserAgent.match(/android/i) == "android";
			var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
			var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
			if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {
				// empty console
				localStorage.setItem('isPc', false);
			} else {
				localStorage.setItem('isPc', true);
				var height = document.body.clientHeight;
				var width = document.body.clientWidth;
				document.addEventListener('resize', function(){
					$('#app').addClass('pc');
					$('html').css('font-size', '55px').css('height', '100vh').css('overflow', 'auto').css('width', '414px').css('margin', '0 auto');
					$('.van-tabbar').css('width','414px').css('margin', '0 auto');
					$('.van-submit-bar, .van-tabbar--fixed').css('position', 'relative');
					$('.bodyContent').css('position','relative');
					$('body').css('background-color', '#fff').css('height', '100%').css('width', '414px').css('margin', '0 auto');
					$('#addFixedTab').addClass('addFixedTab')
					$("#vueHead").css('position', 'relative')
					
					// $('.pc .bodyContent').css('position','relative', 'padding-bottom', '0px');
					// $(".pc .van-tabs").css('width', '414px')
					// $(".pc .height44").css('height', '0px')
					
					_this.ispcs = true;
				}, false);

				$('#app').addClass('pc');
				$('html').css('font-size', '55px').css('height', '100vh').css('overflow', 'auto').css('width', '414px').css('margin', '0 auto');
				$('.van-tabbar').css('width','414px').css('margin', '0 auto');
				$('.van-submit-bar, .van-tabbar--fixed').css('position', 'relative');				
				$('body').css('background-color', '#fff').css('height', '100%').css('width', '414px').css('margin', 'auto');
				$('#addFixedTab').addClass('addFixedTab')
				$("#vueHead").css('position', 'relative')

				// $('.pc .bodyContent').css('position','relative', 'padding-bottom', '0px');
				// $(".pc .van-tabs").css('width', '414px')
				// $(".pc .height44").css('height', '0px')
				_this.ispcs = true;
			}
		}
	},

	watch: {
		'$route'() {
			this.getHeight();
			this.getActive();
		}
	},

	mounted( ) {
		this.getHeight();
		this.getActive();
		console.log('-------mounted!!!---------')
		this.isPc();
		// this.$http.post('/weixin/wx/front/getCode', {
		// 	wxAppId: 1,
		// 	gotoURL: 'https://www.baidu.com'
		// });

		// this.$http.post('/weixin/wx/front/getUserInfo', {
		// 	wxAppId: 1,
		// 	code: ''
		// })
	},

	created() {
		console.log('------created!!!--------')
	}


	// components: { ViewBox }
	
}
</script>
<style lang="less">
@import '~vux/src/styles/1px.less';
 .van-button {
	border-radius: 5px;
}
</style>


<style lang="scss">
	@import './assets/default.scss';
	@font-face {
		font-family: 'iconfont';  /* project id 1543596 */
		src: url('//at.alicdn.com/t/font_1543596_up3wcog81tp.eot');
		src: url('//at.alicdn.com/t/font_1543596_up3wcog81tp.eot?#iefix') format('embedded-opentype'),
		url('//at.alicdn.com/t/font_1543596_up3wcog81tp.woff2') format('woff2'),
		url('//at.alicdn.com/t/font_1543596_up3wcog81tp.woff') format('woff'),
		url('//at.alicdn.com/t/font_1543596_up3wcog81tp.ttf') format('truetype'),
		url('//at.alicdn.com/t/font_1543596_up3wcog81tp.svg#iconfont') format('svg');
	}
	.iconfont {
		font-family: "iconfont" !important;
		position: relative;
		font: 14px/1 "vant-icon";
		font-size: inherit;
		text-rendering: auto;
		font-style: normal;
		display: block;
		min-width: 1em;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}
	.icon-kefu:before {
		content: "\e69f";
	}
	.icon-shouye:before {
		content: "\e600";
	}
	.icon-fenlei:before {
		content: "\e601";
	}
	.icon-wode:before {
		content: "\e615";
	}
	* {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
		font-family: PingFang SC,Helvetica Neue,Arial,sans-serif;
		-webkit-overflow-scrolling: touch;
	}
	html, body {
		height: 100%;
		width: 100vw;
		font-size: 14px;
		color: $fontColor;
		background-color: #f2f2f2;
		overflow-x: hidden;
		em, i {
			font-style: normal;
		}
	} 

	.van-tab--active {
        color: $defaultColor !important; 
    }

	#app {
		height: 100%;
		overflow: hidden;
		// position: relative;
	}

	.redTheme {
		/deep/ .van-nav-bar .van-icon {
			color: #fff;
		} 

		/deep/.van-nav-bar__title {
			color: #fff;
		}
		/deep/.van-nav-bar__text {
			color: #fff;
		}

		/deep/ .van-nav-bar {
			background-color: #d81a26;
		}
	}
	
	.van-submit-bar, .van-tabbar--fixed {
		position: absolute;
	}

	.bodyContent {
		transition: all .2s;
		width: 100%;
		overflow-y: auto;
		box-sizing: border-box;
		position: absolute;
		height: 100%;
		overflow: auto;
		-webkit-overflow-scrolling: touch;
	}


	.el-fade-in-linear-enter-active,
	.el-fade-in-linear-leave-active,
	.fade-in-linear-enter-active,
	.fade-in-linear-leave-active {
		transition: opacity .2s linear
	}

	.el-fade-in-enter-active,
	.el-fade-in-leave-active,
	.el-zoom-in-center-enter-active,
	.el-zoom-in-center-leave-active {
		transition: all .3s cubic-bezier(.55, 0, .1, 1)
	}

	.el-zoom-in-center-enter,
	.el-zoom-in-center-leave-active {
		opacity: 0;
		transform: scaleX(0)
	}

	.el-zoom-in-top-enter-active,
	.el-zoom-in-top-leave-active {
		opacity: 1;
		transform: scaleY(1);
		transition: transform .3s cubic-bezier(.23, 1, .32, 1), opacity .3s cubic-bezier(.23, 1, .32, 1);
		transform-origin: center top
	}

	.el-zoom-in-top-enter,
	.el-zoom-in-top-leave-active {
		opacity: 0;
		transform: scaleY(0)
	}

	.el-zoom-in-bottom-enter-active,
	.el-zoom-in-bottom-leave-active {
		opacity: 1;
		transform: scaleY(1);
		transition: transform .3s cubic-bezier(.23, 1, .32, 1), opacity .3s cubic-bezier(.23, 1, .32, 1);
		transform-origin: center bottom
	}

	.el-zoom-in-bottom-enter,
	.el-zoom-in-bottom-leave-active {
		opacity: 0;
		transform: scaleY(0)
	}

	.el-zoom-in-left-enter-active,
	.el-zoom-in-left-leave-active {
		opacity: 1;
		transform: scale(1);
		transition: transform .3s cubic-bezier(.23, 1, .32, 1), opacity .3s cubic-bezier(.23, 1, .32, 1);
		transform-origin: top left
	}

	.el-zoom-in-left-enter,
	.el-zoom-in-left-leave-active {
		opacity: 0;
		transform: scale(.45)
	}

	.collapse-transition {
		transition: height .3s ease-in-out, padding-top .3s ease-in-out, padding-bottom .3s ease-in-out
	}

	.horizontal-collapse-transition {
		transition: width .3s ease-in-out, padding-left .3s ease-in-out, padding-right .3s ease-in-out
	}

	.el-list-enter-active,
	.el-list-leave-active {
		transition: all 1s
	}

	.el-list-enter,
	.el-list-leave-active {
		opacity: 0;
		transform: translateY(-30px)
	}

	.addFixedTab{		
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
		margin: 0 auto;
		text-align: center;
	}

	.pc .bodyContent{
		position: relative!important;
		// padding-bottom: 50px!important;
	}
	.pc .van-tabs{width: 414px!important;}
	.pc .height44{height: 0px!important;}
	.pc .van-sku-container{width: 414px!important;}
	.pc .fixedBotoomPayMask{
		width: 414px;
		position: fixed;
		bottom: 0;
		text-align: center;
		margin: 0 auto;
	}
	.pc .fixedBotoomPayMask .fixedBotoomPay{position: relative!important;}
	.pc .selfFixDivMask{width: 414px!important;}
</style>
 